<template>
    <input type="text"
    @focus="isFocus=true"
    @blur="isFocus=false"
    :class="{inputFocus:isFocus,inputBlur:!isFocus}">
</template>
<script>
export default {
    data(){
        return{
            isFocus:false
        }
    },
    methods:{}
}
</script>
<style scoped>
input{
    width: 10px;
    transition: all 1s;
}
.inputFocus{
    width: 150px;
}
.inputBlur{
    width: 10px;
}
</style>